  //付费记录页面                    ---====》这个页面有bug
import React,{Component} from 'react'
import {Modal,Table,Tabs } from 'antd'
import Button from '../button/button'
import Card from '../card/card'
// import $ from 'jquery'
import './PayRecord.css'
const TabPane = Tabs.TabPane;

export default class PayRecord extends Component {
    constructor(props){
        super(props);
        this.state={
     

        }
    }

    contentcode=(data)=>{          //付费详情内容
        let source ={};
        if(data){
            let child = data.map((item)=>{
                let dataSource = item.payment_detail.map((info)=>{
                        source.role=info.role,
                        source.money=info.money,
                        source.type=info.type,
                        source.cash_name=info.cash_name,
                        source.cash_card=info.cash_card,
                        source.cash_bank=info.cash_bank
                    return source
                })
                // console.log(dataSource)
                return(
                    <TabPane tab="Tab 1" key=''>
                        <div className="modal_pay_box">
                            <div>
                                <div className="modal_pay_record">
                                    <div style={{textAlign:'right'}}>{new Date(item.examine_time * 1000).toLocaleDateString()}</div>
                                    <Card head="信" item="4" modaldata={item}></Card>

                                    {/* <div className="card_box">
                                        <div className="card_box_head">
                                            日
                                        </div>
                                        <div className="card_box_content">
                                            <div className="card_content_triangle"></div>
                                            <div>
                                                <Table columns={columns} dataSource={dataSource} pagination={false} scroll={{ x: 700 }} >
                                                </Table>
                                            </div>
                                        </div>
                                    </div> */}

                                </div>
                            </div>
                        </div>
                    </TabPane>
                )
            })
            return child
        }
        
    }

    PayReacordcancel=()=>{
        this.props.onCancel();
    }

    render(){
        const cancelbtn={
            float:'right',
            width:'88px',
            height:'30px',
            color:'#fff',
            background: '#4C8EDB',
            borderRadius: '4px'
        }
        // console.log(this.props.modaldata)
        let contentcode = this.contentcode(this.props.modaldata ? this.props.modaldata :false)
        return(
            <Modal title="付费记录" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                footer={null}
                onCancel={this.PayReacordcancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}>
                <Tabs type="card">
                    {this.props.modaldata ? contentcode :false}
                </Tabs>
            </Modal>
        )
    }
}

const columns = [{
    title: '角色',
    dataIndex: 'role',
    key: 'role',
    fixed: 'left',
  }, {
    title: '金额',
    dataIndex: 'money',
    key: 'money',
  }, {
    title: '描述',
    dataIndex: 'type',
    key: 'type',
  },{
    title: '收款人',
    dataIndex: 'cash_name',
    key: 'cash_name',
  },{
    title: '收款账号',
    dataIndex: 'cash_card',
    key: 'cash_card',
  }, {
    title: '收款银行',
    dataIndex: 'cash_bank',
    key: 'cash_bank',

  }];




